<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- tailwindcss -->
  <!-- <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/3.4.17/tailwind.min.css"
    /> -->
  <!-- <script src="https://cdn.tailwindcss.com"></script> -->
  <!-- fontawesome -->
  <!-- <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    /> -->
  <!-- <link      href="https://cdn.jsdelivr.net/npm/daisyui@5"      rel="stylesheet"      type="text/css"    /> -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> -->
  <!-- <link href="https://cdn.jsdelivr.net.cn/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />-->
  <link rel="stylesheet" href="./assets/font-awesome.css" />
  <link href="./assets/daisyui.css" rel="stylesheet" type="text/css" />
  <script src="./assets/tailwindcssbrowser.js"></script>
  <link href="./assets/themes.css" rel="stylesheet" type="text/css" />
  <!-- <script>
      tailwindcss;
      tailwind.config = {
        darkMode: "class",
      };
    </script> -->
  <!-- <script type="text/tailwindcss">
      @layer utilities {
      }
    </script> -->
  <style>
    .fieldset {
      outline: none;
    }
  </style>
</head>

<body>
  <div class="container max-w-full w-full">
    <div class="todo-box max-w-3xl mx-auto pt-20">
      <div class="title-card flex justify-center">
        <h1 class="text-3xl font-bold">To-Do List</h1>
      </div>
      <div class="add-div">
        <div class="addForm">
          <div class="card bg-base-100 w-full max-w-sm shrink-0">
            <!-- <div class="card-body">
                <fieldset
                  class="fieldset flex flex-row gap-4 justify-start items-center"
                >
                  <input
                    class="input"
                    placeholder="title-card"
                    autocomplete="off"
                  />
                  <button class="btn btn-primary btn-md">
                    <i class="fas fa-plus"></i> Add
                  </button>
                </fieldset>
              </div>
            </div> -->
            <form action="javascript:void(0)" class="w-full inline-flex grow-1">
              <input type="text" class="input fieldset" placeholder="title" autocomplete="off" id="item-title" />
              <button class="btn btn-primary btn-md ml-2" onclick="addTodo()">
                <i class="fas fa-plus"></i> Add
              </button>
                <button class="btn btn-primary btn-md ml-2" onclick="loadTodos()">
               <i class="fas fa-sync-alt"></i> Refresh
              </button>
            </form>
          </div>
        </div>
        <div class="todo-list-div w-full shadow-2xl rounded-xl">
          <ul class="list todo-list text-base"></ul>
        </div>
      </div>
    </div>
    <script>
        function addTodo() {
          let title = document.getElementById("item-title").value;
          if (title === "") {
            alert("请输入标题");
            return;
          }
          fetch("http://localhost:8080/api/todo", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              title: title,
              done: false,
            }),
          })
            .then((data) => {
              loadTodos();
            })
            .catch((error) => console.error(error));
          document.getElementById("item-title").value = "";
        }
        function toggleTodo(id, done) {
          console.log(id, done)
          fetch(`http://localhost:8080/api/todo/${id}`, {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              done: done,
            }),
          })
            .then((data) => {
              loadTodos();
            })
            .catch((error) => console.error(error));
        }
        function deleteTodo(id) {
          fetch(`http://localhost:8080/api/todo/${id}`, {
            method: "DELETE",

          })
            .then((data) => {
              if (data.status === 200) {
                alert("删除成功");
              }
              loadTodos();
            })
            .catch((error) => console.error(error));
        }

        function loadTodos() {
          console.log("load todos");
          fetch("http://localhost:8080/api/todos")
            .then((response) => response.json())
            .then((data) => {
              console.log(data.data);
              // render todos
              renderList(data.data);
            })
            .catch((error) => console.error(error));
          console.log("load todos end");
        }
        function renderList(todos) {
          let ulEl = document.querySelector(".todo-list");
          ulEl.innerHTML = "";
          let ulContent = "";
          todos.forEach((todo, index) => {
            let liElement = document.createElement("li");
            let liContent = `
          <li class="list-row">
              <label for="todo-item-1">
                <input
                  type="checkbox"
                  ${todo.done ? "checked" : ""}
                  class="checkbox checkbox-lg"
                  onclick="toggleTodo(${todo.id}, !${todo.done})"
                />
              </label>
              <span class="text-xl">${todo.title}</span>
              <div class="btn-action left-0">
                <button class="btn btn-error btn-md text-gray-50" onclick="deleteTodo(${todo.id})">
                  <i class="fas fa-trash-alt pr-2"></i>删除
                </button>
              </div>
            </li>
            `;
            liElement.innerHTML = liContent;
            ulContent += liContent;
          });
          ulEl.innerHTML = ulContent;
        }
        window.onload = function () {
          loadTodos();
        };
    </script>
</body>

</html>